{% extends "profiles/base_profile_edit.html" %}

{% load i18n %}

{% block title %}{% trans "Change Email" %}{% endblock %}

{% block profile-admin-change-email %}active{% endblock %}

{% block edit_content_header %} {% trans "Change Email" %} {% endblock %}

{% block edit_content %}
  {% if user.emailaddress_set.all %}
    <p>{% trans "The following email addresses are associated with your account:" %}</p>

    <form action="{% url 'account_email' %}" class="email_list" method="post">
      {% csrf_token %}
      <fieldset class="blockLabels">

        {% for emailaddress in user.emailaddress_set.all %}
          <div class="ctrlHolder">
            <label for="email_radio_{{ forloop.counter }}" class="{% if emailaddress.primary %}primary_email{%endif%}">
              <input id="email_radio_{{ forloop.counter }}" type="radio" name="email" {% if emailaddress.primary %}checked="checked"{%endif %} value="{{ emailaddress.email }}"/>

              {{ emailaddress.email }}
                {% if emailaddress.verified %}
                  <span class="verified">{% trans "Verified" %}</span>
                {% else %}
                  <span class="unverified">{% trans "Unverified" %}</span>
                {% endif %}
                {% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
            </label>
          </div>
        {% endfor %}

        <div class="buttonHolder">
          <button class="secondaryAction" type="submit" name="action_primary" >{% trans "Make Primary" %}</button>
          <button class="secondaryAction" type="submit" name="action_send" >{% trans "Re-send Verification" %}</button>
          <button class="primaryAction" type="submit" name="action_remove" >{% trans "Remove" %}</button>
        </div>

      </fieldset>
    </form>

  {% else %}

  <p><strong>{% trans "Warning:" %}</strong>{% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}</p>

  {% endif %}

  <h2>{% trans "Add E-mail Address" %}</h2>

  <form method="post" action="{% url 'account_email' %}" class="add_email">
    {% csrf_token %}
    {{ form.as_p }}
    <button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
  </form>

{% endblock %}

{% block footerjs %}

  (function() {
    var message = "{% trans 'Do you really want to remove the selected email address?' %}";
    var actions = document.getElementsByName('action_remove');
    if (actions.length) {
      actions[0].addEventListener("click", function(e) {
        if (! confirm(message)) {
          e.preventDefault();
        }
      });
    }
  })();

  (function() {
    var primaryButton = document.querySelector("button[name=action_primary]");
    var sendVerificationButton = document.querySelector("button[name=action_send");

    {% if user.emailaddress_set.exists %}
      {% for emailaddress in user.emailaddress_set.all %}
        var email_{{ forloop.counter }} = document.querySelector("input[value='{{ emailaddress.email }}']")
        if (email_{{ forloop.counter }}.checked == true) {
          {% if emailaddress.primary %}
            primaryButton.style.display = 'None';
          {% else %}
            primaryButton.style.display = 'block';
          {% endif %}
          {% if emailaddress.verified %}
            sendVerificationButton.style.display = 'None';
          {% else %}
            sendVerificationButton.style.display = 'block';
            primaryButton.style.display = 'None';
          {% endif %}
        }

        email_{{ forloop.counter }}.addEventListener('change', function() {
          {% if emailaddress.primary %}
            primaryButton.style.display = 'None';
          {% else %}
            primaryButton.style.display = 'block';
          {% endif %}
          {% if emailaddress.verified %}
            sendVerificationButton.style.display = 'None';
          {% else %}
            sendVerificationButton.style.display = 'block';
            primaryButton.style.display = 'None';
          {% endif %}
        })
      {% endfor %}
    {% endif %}
  })();

{% endblock %}
